<!--
推荐type=3时，代理商的功能，BD没有
-->
<template>
    <div class="addressAdd">
      <div class="fixed_head"><span class="goback" @click="goback"><i class="icon-back icon"></i><span class="goback_word">返回</span></span> <span class="title">填写地址</span> </div>
      <div class="form">
        <ul>
          <li><label>联系人：</label><input v-model="name" placeholder="姓名"></li>
          <li><label>性别：</label>
            <span :class="sex==0 ? 'man active' : 'man' " @click="select">先生</span>
            <span :class="sex==1 ? 'women active' : 'women' " @click="selectWomen">女士</span>
          </li>
          <li><label>电话：</label><input placeholder="电话"></li>
          <li @click="toAddress"><label>地址：</label><input  placeholder="请选择地址" disabled v-model="city"></li>
          <li><label>门牌号：</label><input placeholder="例如1栋306"></li>
          <li><wv-switch title="设置默认地址：" ></wv-switch></li>
        </ul>
      </div>
      <wv-button type="primary" class="save" >+保存</wv-button>

      <v-distpicker type="mobile" @selected='selected' v-show="addInp" class="area1"></v-distpicker>
      <div class="mask" v-show="mask"></div>
    </div>
</template>

<script>
import info from '../../info.js'
import VDistpicker from 'v-distpicker'

export default {
  name: "addressAdd",
  data(){
      return{
        name:'', 
        city:'',
        addInp :false,
        mask:false,
        sex:0,

      }
  },
  components: { VDistpicker },
  methods: {
    goback(){
      this.$router.go(-1)
    },
    toAddress(){
      this.mask = true;
      this.addInp = true;
    },
    // 省市区三级联动
    selected(data){
        this.mask =false;
        this.addInp = false;
        this.city = data.province.value + ' ' + data.city.value +' ' + data.area.value
    },
    select(){
      this.sex = 0;
      console.log(this.sex+"男")
    },
    selectWomen(){
      this.sex = 1;
      console.log(this.sex+"女")
    }
  },
  created() {
    
  },

 
  
};
</script>


<style lang="scss">
@import '../../base/reset.scss';
@import "../../base/common.scss";
.addressAdd {
  position: relative;
  .form{
    text-align: left;
    margin-top:pxTorem(20) ;
    ul
     li {
       padding: pxTorem(20) pxTorem(30);
       position: relative;
       &:after {
          content: " ";
          position: absolute;
          left: 0;
          right: 0;
          height: 1px;
          color: #e5e5e5;
          z-index: 2;
          bottom: 0;
          border-bottom: 1px solid #e5e5e5;
          -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
          -webkit-transform: scaleY(.5);
          transform: scaleY(.5);
        }
        label {
          width: pxTorem(120);
          margin-right: pxTorem(20);
          display: inline-block;
        }
        input {
          width: pxTorem(470);
        }
       
        .man {
          width: pxTorem(80);
          display: inline-block;
          border:1px solid #e5e5e5;
          text-align: center;
          margin-right: pxTorem(20);
          font-size: pxTorem(28);

        }
        
        .women {
          width: pxTorem(80);
          display: inline-block;
          border:1px solid #e5e5e5;
          text-align: center;
          font-size: pxTorem(28);
        }
        .active{
           border:1px solid #6DA93F;
        }
        .weui-cell {
          padding: 10px 0
        }
     }
     
  }
  .save{
    width: 90%;
    margin:pxTorem(60) auto;
    background: #6DA93F
  }

  .area1{
      width: 100%;
      height: 45%;
      position:fixed;
      left: 0;
      bottom: 0;
      overflow-y: scroll;
      z-index: 3;
  }
  .distpicker-address-wrapper {
      // position:fixed;
      height: pxTorem(600);
      .address-header {
        position: fixed;
        width: 100%;
        // margin-top: pxTorem(84)
      }
      .address-container {
        ul {
          margin-top: pxTorem(84);
          height:pxTorem(516);
        }
      }
  }
  .mask {
    width: 100%;
    height: 100%;
    position: absolute;
    left:0;
    top:0;
    background: rgba(0,0,0,.5);
        z-index: 2;
  }
}



</style>